<template>
    <section class='main'>
        <div class='crumbs'>
            <el-breadcrumb separator='/'>
                <el-breadcrumb-item><i class='el-icon-rank'></i> 拖拽组件</el-breadcrumb-item>
                <el-breadcrumb-item>拖拽排序</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class='container'>
            <div class='wall'>
                <div class='item' v-for='item in photoList'>
                    <div class='close' @click='deletePhoto(item.id)'>×</div>
                    <img class='photo'
                         :src='item.photo'>
                    <i class='el-icon-link' @click='getLinkContent(item)'></i>
                </div>
                <div>
                    <el-upload
                        style='width: 280px'
                        :action='fileUrl'
                        class='avatar-uploader'
                        :show-file-list='false'
                        :on-success='handleSuccess'>
                        <img v-if='imageUrl' :src='imageUrl' class='avatar'>
                        <i v-else class='el-icon-plus avatar-uploader-icon'></i>
                    </el-upload>
                    <div style='display: flex;width: 280px;justify-content: space-around;'>
                        <div class='addNews' @click='addOrUpdateHandle()'>{{ tips }}</div>
                        <el-button style='margin-left: 5px' type='primary' plain @click='savePhoto'>添加</el-button>
                    </div>
                </div>
            </div>
            <add-or-update v-if='addOrUpdateVisible' ref='addOrUpdate' @linkNews='linkNews'></add-or-update>
        </div>
        <el-drawer
            size='60%'
            :visible.sync='drawer'
            :direction='direction'>
            <div v-html='htmlContent'></div>
        </el-drawer>
    </section>
</template>

<script>
import constVal from '@/api/const';
import AddOrUpdate from './photoWall-add-news';
import apis from '@/api/apis';

export default {
    name: 'draglist',
    data() {
        return {
            drawer: false,
            direction: 'rtl',
            imageUrl: '',
            photoWall: {},
            htmlContent: '',
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            addOrUpdateVisible: false,
            fileUrl: '',
            photoList: [],
            tips: '添加文章链接'
        };
    },
    components: {
        AddOrUpdate
    },
    created() {
        this.fileUrl = constVal.FileUploadInterface();
        this.getData();
    },
    methods: {
        getLinkContent(item) {
            apis.getNewsById(item.linkUrl).then(res => {
                this.htmlContent = res.news.content;
                this.drawer = true;
            });
        },
        savePhoto() {
            if (this.imageUrl === '') {
                this.$message.error('请上传图片');
                return;
            }
            if (this.photoWall.linkUrl === undefined) {
                this.$message.error('请链接新闻');
                return;
            }
            apis.savePhotoWall(this.photoWall).then(res => {
                if (res.code === 0) {
                    this.getData();
                    this.tips = '添加文章链接';
                    this.imageUrl = '';
                    this.photoWall = {};
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        getData() {
            apis.getPhotoWallData().then(res => {
                this.photoList = res.data;
            });
        },
        linkNews(news) {
            this.addOrUpdateVisible = false;
            this.tips = news.title;
            this.photoWall.linkUrl = news.id;
        },
        addOrUpdateHandle() {
            this.addOrUpdateVisible = true;
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init();
            });
        },
        deletePhoto(id) {
            this.$confirm(`确定对id=${id}进行删除操作?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                apis.deletePhotoWall([id]).then(data => {
                    if (data && data.code === 0) {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.getData();
                            }
                        });
                    } else {
                        this.$message.error(data.msg);
                    }
                });
            }).catch(() => {
            });
        },
        handleSuccess(response) {
            this.imageUrl = response.url;
            this.photoWall.photo = this.imageUrl;
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    }
};

</script>

<style scoped>
.wall {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 10px;
}

.item {
    width: 280px;
    height: 470px;
    position: relative;
}

.addNews {
    background: #ECF5FF;
    width: 240px;
    text-align: center;
    padding: 5px 0;
    font-size: 13px;
    color: #20a0ff;
    cursor: pointer;
    height: 45px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.close {
    position: absolute;
    right: 10px;
    top: 10px;
    background: #289628;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    text-align: center;
    line-height: 20px;
}

.close:hover {
    background: #5daf34;
}

.el-icon-link {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #fff;
    font-size: 25px;
    cursor: pointer;
}

.photo {
    width: 100%;
    height: 470px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;

    overflow: hidden;
}

/deep/ .el-upload.el-upload--text {
    width: 280px;
    height: 410px;
    border-radius: 0%;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    line-height: 410px;
    text-align: center;
}

.avatar {
    width: 280px;
    height: 410px;
    display: block;
}
</style>
